<template>
	<view>
		<view class="space-head">
			<view class="bgimgbox" @tap="chooseImg"><image :src="tabimg"></image></view>
			<view class="space-user-box">
				<view><image :src="userinfo.userPic" mode="widthFix"></image></view>
				<view class="space-userinfo-head">
					{{userinfo.nickName}}
					<view class="userAge">
						<view class="icon iconfont" :class="[userinfo.sex==0?'icon-nan':'icon-nv']">{{userinfo.age}}</view>
					</view>
				</view>
				<view @tap="chooseFollow" :class="[!userinfo.isfollow ? 'space-follow' : 'active']">
					<view class="icon iconfont " :class="[!userinfo.isfollow ? 'icon-zengjia' : '']">{{ userinfo.isfollow ? '已关注' : '关注' }}</view>
				</view>
			</view>
		</view>
		<view class="me-navbar">
			<view class="me-navbar-item" v-for="(item, index) in spaceBar" :key="index">
				<view>{{ item.number }}</view>
				<view>{{ item.name }}</view>
			</view>
		</view>
		<view class="borderbar"></view>
		<!-- tab切换头部 -->
		<swiperTabber
			:tabar="tabBars"
			:tabIndex="tabIndex"
			:tabberStyle="{ border: 'none' }"
			@tabtap="ontabtap"
			:tabbarItemStyle="{ width: '33%', 'text-align': 'center' }"
		></swiperTabber>
		<!-- /tab切换内容 -->
		<swiper class="swiper-box" :style="{ height: swiperHeight + 'px' }" :current="tabIndex" @change="tabchange">
			<swiper-item class="swiper-item">
				<view class="space-content">
					<view class="space-content-item">
						<view>账号信息</view>
						<view>糗龄 {{setAgeLong}}</view>
						<view>糗百id：{{userinfo.userId}}</view>
					</view>
					<view class="space-content-item">
						<view>个人信息</view>
						<view>星座： {{setConstellation}}</view>
						<view>职业：{{userinfo.occupation}}</view>
						<view>故乡：{{userinfo.hometown}}</view>
						<view>情感状态：{{userinfo.emotionStatus}}</view>
					</view>
				</view>
			</swiper-item>
			<swiper-item class="swiper-item" v-for="(tab, index1) in spaceList" :key="index1">
				<scroll-view class="scroll-v list" scroll-y @scrolltolower="loadMore(index1)">
					<template v-else-if="">
						<!-- 列表页 -->
						<block v-for="(item, index) in tab.list" :key="index"><commonList :item="item"></commonList></block>
						<!-- 上拉加载 -->
						<loadMore :loadtext="tab.loadtext"></loadMore>
					</template>
				</scroll-view>
			</swiper-item>
		</swiper>
		<spacePopup @closedio="closedio" @lahei="lahei" @beizhu="beizhu" :openShow="openShow"></spacePopup>
	</view>
</template>

<script>
import swiperTabber from '../../components/index/swiper-tabbar.vue';
import commonList from '../../components/common/common-list.vue';
import loadMore from '@/components/common/load-more.vue';
import spacePopup from '@/components/user-space/space-popup.vue';
import time from '@/common/time.js'
export default {
	components: {
		swiperTabber,
		loadMore,
		commonList,
		spacePopup
	},
	data() {
		return {
			openShow:false,
			userinfo:{
				userPic:'../../static/img/userpic/20.jpg',
				nickName:'楚留香',
				sex:0,//0男  1 女
				age:'20',
				isfollow:true,
				agelong:'2018-10-1',//注册时间
				userId:'101',
				constellation:'2018-10-1',
				occupation:'it',
				hometown:'山西太原',
				emotionStatus:'已婚'
			},
			swiperHeight:500,
			imgcount: 1, //点击切换背景图片
			spaceBar: [
				{
					number: '10k',
					name: '获赞'
				},
				{
					number: 11,
					name: '关注'
				},
				{
					number: 12,
					name: '粉丝'
				}
			],
			tabIndex: 0,
			tabBars: [
				{
					name: '主页',
					id: 'zhuye'
				},
				{
					name: '糗事',
					id: 'qiushi'
				},
				{
					name: '动态',
					id: 'dongtai'
				}
			],
			spaceList:[
				{
				loadtext:'上拉加载更多',
				list:[{
							userheadpic: '../../static/img/userpic/11.jpg',
							userhead: '扯淡的你',
							sex: 0, //0男
							userage: '15',
							isfollow: false,
							usertext: '花想一双月相容onLaunch	当uni-app 初始化完成时触发（全局只触发一次）',
							userType: '0', //0img 1 video2发布，
							// userPic: '../../static/img/datapic/14.jpg',
							useraddress: '北京 门头沟',
							userinfo: {
								forward: 20,
								news: 35,
								fabulous: 2222
							}
						},
						{
							userheadpic: '../../static/img/userpic/13.jpg',
							userhead: '小甜甜',
							sex: 1,
							userage: '15',
							isfollow: false,
							usertext: '花想一双月相容onLaunch	）',
							userType: '1', //0img 1 video2发布，
							// userPic: '../../static/img/datapic/15.jpg',
							userPlayNum: '20w',
							userplayLong: '2:45',
							useraddress: '北京 门头沟',
							userinfo: {
								forward: 20,
								news: 35,
								fabulous: 2222
							}
						},
						{
							userheadpic: '../../static/img/userpic/16.jpg',
							sex: 1,
							userhead: '扯淡的你',
							userage: '15',
							isfollow: true,
							usertext: '花想一双月相容onLaunch	当uni-app 初始化完成时触发（全局只触发一次）',
							userType: '3', //0img 1 video2发布，
							// userPic: '../../static/img/datapic/17.jpg',
							userPlayNum: '20w',
							userplayLong: '2:45',
							useraddress: '北京 门头沟',
							usertype3: {
								img: '../../static/img/datapic/20.jpg',
								text: '我喜欢你正如你爱上了她'
							},
							userinfo: {
								forward: 20,
								news: 35,
								fabulous: 2222
							}
						},
						]
					},
					{
					loadtext:'上拉加载更多',
					list:[{
								userheadpic: '../../static/img/userpic/11.jpg',
								userhead: '扯淡的你',
								sex: 0, //0男
								userage: '15',
								isfollow: false,
								usertext: '花想一双月相容onLaunch	当uni-app 初始化完成时触发（全局只触发一次）',
								userType: '0', //0img 1 video2发布，
								userPic: '../../static/img/datapic/14.jpg',
								useraddress: '北京 门头沟',
								userinfo: {
									forward: 20,
									news: 35,
									fabulous: 2222
								}
							},
							{
								userheadpic: '../../static/img/userpic/13.jpg',
								userhead: '小甜甜',
								sex: 1,
								userage: '15',
								isfollow: false,
								usertext: '花想一双月相容onLaunch	）',
								userType: '1', //0img 1 video2发布，
								userPic: '../../static/img/datapic/15.jpg',
								userPlayNum: '20w',
								userplayLong: '2:45',
								useraddress: '北京 门头沟',
								userinfo: {
									forward: 20,
									news: 35,
									fabulous: 2222
								}
							},
							{
								userheadpic: '../../static/img/userpic/16.jpg',
								sex: 1,
								userhead: '扯淡的你',
								userage: '15',
								isfollow: true,
								usertext: '花想一双月相容onLaunch	当uni-app 初始化完成时触发（全局只触发一次）',
								userType: '3', //0img 1 video2发布，
								userPic: '../../static/img/datapic/17.jpg',
								userPlayNum: '20w',
								userplayLong: '2:45',
								useraddress: '北京 门头沟',
								usertype3: {
									img: '../../static/img/datapic/20.jpg',
									text: '我喜欢你正如你爱上了她'
								},
								userinfo: {
									forward: 20,
									news: 35,
									fabulous: 2222
								}
							},
							]
						},
				]

		};
	},
	computed: {
		tabimg() {
			return '../../static/bgimg/' + this.imgcount + '.jpg';
		},
		setAgeLong(){
			return time.gettime.sumAge(this.userinfo.agelong)
		},
		setConstellation(){
			return time.gettime.getHoroscope(this.userinfo.constellation)
		}
	},
	onLoad() {
		uni.getSystemInfo({
			success: (res) => {
				console.log(res.windowHeight)
				console.log(res.screenHeight)
				let height = res.windowHeight - uni.upx2px(80)
				this.swiperHeight = height;
			}
		});
	},
	//监听原生标题栏按钮点击事件
	onNavigationBarButtonTap(e){
		console.log(e)
		switch (e.index){
			case 0:
			//左边
			this.opendio()
				break;
			case 1:
			this.closedio();
				break;
		}
	},
	methods: {
		chooseFollow() {
			this.userinfo.isfollow = !this.userinfo.isfollow;
		},
		chooseImg() {
			console.log(111);
			this.imgcount < 4 ? this.imgcount++ : (this.imgcount = 1);
		},
		//头部切换
		ontabtap(e) {
			this.tabIndex = e;
		},
		tabchange(e){
			this.tabIndex = e.detail.current;
		},
		lahei(){
			console.log(111)
			this.closedio()
		},
		beizhu(){
			this.closedio()
		},
		closedio(){
			this.openShow=false;
		},
		opendio(){
			this.openShow=true;
		},
		//上拉加载
		loadMore(index) {
			if (this.spaceList[index].loadtext != "上拉加载更多") {
				return
			}
			//修改状态
			this.spaceList[index].loadtext = "加载中...";
			setTimeout(() => {
				//获取完成
				let obj = {
					userheadpic: '../../static/img/userpic/13.jpg',
					userhead: '小甜甜',
					sex: 1,
					userage: '15',
					isfollow: false,
					usertext: '花想一双月相容onLaunch	当uni-app 初始化完成时触发（全局只触发一次）',
					userType: '1', //0img 1 video2发布，
					userPic: '../../static/img/datapic/15.jpg',
					userPlayNum: '20w',
					userplayLong: '2:45',
					useraddress: '北京 门头沟',
					userinfo: {
						forward: 20,
						news: 35,
						fabulous: 2222
					}
				}
				this.spaceList[index].list.push(obj);
				this.spaceList[index].loadtext = "上拉加载更多"
			}, 1000)
			// this.spaceList[index].loadtext="我也是有底线的"
		}
	}
};
</script>

<style lang="scss">
@import '../../common/comm.css';
.space-head {
	background: url(../../static/bgimg/1.jpg) no-repeat center;
	width: 100%;
	height: 500upx;
	position: relative;
	.bgimgbox {
		width: 100%;
		height: 500upx;
		& > image {
			height: 100%;
			width: 100%;
		}
	}
}
.space-user-box {
	position: absolute;
	top: 60%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	image {
		width: 120upx;
		height: 120upx;
		border-radius: 100%;
	}
	& > view {
		display: flex;
		justify-content: center;
	}
	.space-userinfo-head {
		display: flex;
		color: #ffffff;
		align-items: center;
		font-size: 35upx;
		padding: 20upx 0;
		.userAge {
			background-color: #44b3ff;
			color: #ffffff;
			padding: 0upx 10upx;
			border-radius: 20px;
			font-size: 16upx;
			margin-left: 10upx;
			view {
				font-size: 20upx;
			}
		}
		.userAgeSex {
			background-color: #ff6a8d;
		}
	}
	.space-follow {
		background-color: #ffe933;
		border-radius: 10upx;
		fonr-size: 18upx;
	}
	.active {
		border-radius: 10upx;
		color: #ffffff;
		border: 1px solid #ffffff;
	}
	.icon {
		padding: 0 10upx;
	}
}
.me-navbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20upx 80upx;
	text-align: center;
	background-color: #ffffff;
	border-top-right-radius: 20upx;
	border-top-left-radius: 20upx;
	position: relative;
	z-index: 2;
	margin-top: -30upx;
	.me-navbar-item {
		& > view:nth-of-type(2) {
			color: #d7d7d7;
		}

		& > view:nth-of-type(1) {
			color: #000;
			font-size: 35upx;
		}
	}
}
.borderbar {
	height: 20upx;
	width: 100%;
	background-color: #f4f4f4;
}
.space-content {
	padding: 0 30upx;
	overflow: hidden;
	width: 100%;
	.space-content-item {
		padding: 20upx 0;
		border-bottom: 1px solid #f7f7f7;
		& > view {
			color: #cccccc;
		}
		& > view:first-child {
			color: #333333;
			padding: 10upx 0;
		}
	}
}
</style>
